<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>视频管理</BreadcrumbItem>
      <BreadcrumbItem>视频预览</BreadcrumbItem>
    </Breadcrumb>
    <Form>
      <FormItem>
        <Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
      </FormItem>
    </Form>
    <div>
      <div style="display: flex;">
        <div style="width: 30%;margin-left: 100px;">
          <h3>视频区:</h3>
          <video ref="video" width="100%" controls name="media" style="height: 300px"></video>
        </div>
        <div class="video" style="margin-left: 200px;">
          <h3 style="font-size: 24px;">简介:</h3>
          <p>视频所属设备: B1203</p>
          <p>视频ID: B1203</p>
          <p>视频名称: B1203</p>
          <p>视频说明: 这是一台橙汁售卖机</p>
          <Button type="error" style="margin-left: 100px;">删除</Button>
        </div>
      </div>
    </div>
  </div>



</template>


<script>
  export default {
    data() {
      return {
        video: "",
        mouldData: [],
        checkIndex: null,
        refHeight: 0,
        mxadata: [],
        xxx:0,
      };
    },
    mounted() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.refHeight = this.$refs.getheight.clientHeight;
          this.xxx=document.getElementById('x1').offsetHeight+document.getElementById('x2').offsetHeight+160
        });
      }, 300);
    },
    created() {
      this.getGoods();
      this.getVideo();
      this.getMx();
    },
    methods: {
      getGoods() {
        this.axios
          .post("/order/get_order_goods", { order_id: this.$route.query.id })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.mouldData = res.data.dataInfo[0].goods;
            }
          });
      },
      getMx() {
        this.axios
          .post("/order/check_order", {
            id: this.$route.query.ids,
            page: 1,
            limit: 1
          })
          .then(res => {
            console.log('res: ', res)
            if (res.code === 1) {
              this.mxadata = res.data.list[0].order_goods;
              if (!this.mxadata) {
                this.mxadata = []
              }
            }
          });
      },
      getVideo() {
        this.axios
          .post("/order/get_video", { order_id: this.$route.query.id })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.$refs.video.src = res.data.video_url;
            }
          });
      },
      mbclk(item, index) {
        this.checkIndex = item.id;
        let finds = false;
        for (const key in this.mxadata) {
          if (this.mxadata[key].id == item.id) {
            this.mxadata[key].product_num = item.goods_num;
            finds = true;
          }
        }
        if (finds == false) {
          this.mxadata.push({
            id: item.id,
            price: item.c_price,
            product_name: item.name,
            product_num: item.goods_num
          });
        }
      },
      changeLight(item, index) {
        this.checkIndex = item.id;
      },
      dels(item, index) {
        this.checkIndex = null;
        this.mxadata.splice(index, 1);
        for (const i in this.mouldData) {
          if (item.id == this.mouldData[i].id) {
            this.mouldData[i].goods_num = 0;
          }
        }
      },
      submit() {
        let goods = [];
        let falg = [];
        for (const key in this.mxadata) {
          let b = false;
          for (const i in this.mouldData) {
            if (this.mxadata[key].id == this.mouldData[i].id) {
              console.log(falg);
              b = true;
            }
          }
          falg.push(b);
        }
        console.log(falg);
        let run = true;
        for (const key in falg) {
          if (!falg[key]) {
            run = false;
          }
        }
        console.log(run);
        if (!run) {
          return this.$Message.error("请移除未上架商品");
        }
        // this.mxadata.filter(item => Number(item.product_num) != 0);
        this.mxadata.forEach((items, index) => {
          if(items.product_num!=0){
            goods.push({
              goods_id: items["id"],
              num: items["product_num"]
            });
          }
        });
        console.log(goods);
        this.axios
          .post("/order/user_check", {
            goods: goods,
            id: this.$route.query.ids
          })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.$Message.success("审核成功");
              this.$router.go(-1);
            }
          });
      },
      mdAdd(item) {
        item.goods_num = Number(item.goods_num) + 1;
        for (const key in this.mxadata) {
          if (this.mxadata[key].id == item.id) {
            this.mxadata[key].product_num = item.goods_num;
          }
        }
      },
      mdReduce(item) {
        if (item.goods_num > 0) {
          item.goods_num = Number(item.goods_num) - 1;
          for (const key in this.mxadata) {
            if (this.mxadata[key].id == item.id) {
              this.mxadata[key].product_num = item.goods_num;
            }
          }
        } else {
          item.goods_num = 0;
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  /*.swiper-container {*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  margin-left: auto;*/
  /*  margin-right: auto;*/
  /*}*/

  /*// .swiper-wrapper{width: 100%!important;}*/

  /*.li {*/
  /*  position: relative;*/

  /*  .add {*/
  /*    position: absolute;*/
  /*    left: 0;*/
  /*    width: 50%;*/
  /*    top: 0;*/
  /*    bottom: 0;*/
  /*  }*/
  /*  .remove {*/
  /*    position: absolute;*/
  /*    right: 0;*/
  /*    width: 50%;*/
  /*    top: 0;*/
  /*    bottom: 0;*/
  /*  }*/
  /*}*/

  /*.swiper-slide {*/
  /*  text-align: center;*/
  /*  font-size: 18px;*/
  /*  background: #fff;*/

  /*  max-height: 164px;*/
  /*  // width: calc(33.3333% - 10px);*/
  /*  // box-sizing: border-box;*/
  /*  border: 1px solid #dcdee2;*/
  /*  padding: 10px;*/
  /*  // margin-top: 20px;*/

  /*  .flex {*/
  /*    display: flex;*/
  /*    align-items: center;*/
  /*    justify-content: space-between;*/
  /*  }*/

  /*  .img {*/
  /*    width: 80px;*/
  /*    height: 80px;*/
  /*    object-fit: cover;*/
  /*    margin: 10px auto;*/
  /*  }*/

  /*  .name {*/
  /*    text-align: center;*/
  /*    font-size: 14px;*/
  /*    overflow: hidden;*/
  /*    text-overflow: ellipsis;*/
  /*    white-space: nowrap;*/
  /*  }*/
  /*}*/

  /*.mdbtn {*/
  /*  width: 20px;*/
  /*  height: 20px;*/
  /*  padding: 0;*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*  align-items: center;*/
  /*}*/

  /*.on {*/
  /*  background-color: #5cadff;*/
  /*  color: #fff;*/
  /*}*/

  /*.ulBox {*/
  /*  display: flex;*/
  /*  flex-wrap: wrap;*/
  /*  justify-content: space-between;*/
  /*  .flex {*/
  /*    display: flex;*/
  /*    align-items: center;*/
  /*    justify-content: space-between;*/
  /*  }*/
  /*  li {*/
  /*    width: calc(33.3333% - 10px);*/
  /*    min-height: 160px;*/
  /*    box-sizing: border-box;*/
  /*    border: 1px solid #dcdee2;*/
  /*    padding: 10px;*/
  /*    margin-top: 20px;*/

  /*    .img {*/
  /*      width: 80px;*/
  /*      height: 80px;*/
  /*      // object-fit: cover;*/

  /*      margin: 10px auto;*/
  /*    }*/

  /*    .name {*/
  /*      text-align: center;*/
  /*    }*/
  /*  }*/

  /*  .active {*/
  /*    border: 4px solid #2db7f5 !important;*/
  /*  }*/

  /*  &::after {*/
  /*    content: "";*/
  /*    width: calc(33.3333% - 10px);*/
  /*  }*/
  /*}*/

  /*.cardBox {*/
  /*  padding: 15px;*/

  /*  .card {*/
  /*    width: calc(50% - 10px);*/
  /*    margin-bottom: 20px;*/

  /*  }*/
  /*}*/

  /*.card {*/
  /*  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
  /*  padding: 18px 20px;*/
  /*}*/

  /*.flexSw {*/
  /*  display: flex;*/
  /*  justify-content: space-between;*/
  /*  flex-wrap: wrap;*/
  /*}*/

  /*.flexSw .left {*/
  /*  // width: 450px;*/
  /*  // flex: 1;*/
  /*  width: 100%;*/
  /*}*/

  /*.flexSw .right {*/
  /*  // width: 450px;*/
  /*}*/

  /*.borderCard {*/
  /*  // overflow: hidden;*/
  /*  display: flex;*/
  /*  flex-wrap: wrap;*/
  /*  justify-content: space-between;*/
  /*  width: 100%;*/
  /*  flex-flow: column;*/
  /*  box-sizing: border-box;*/
  /*}*/

  /*.borderCard ul {*/
  /*  display: block;*/
  /*  min-width: 300px;*/
  /*  box-sizing: border-box;*/
  /*  border: 1px solid #ddd;*/
  /*  padding: 20px;*/
  /*  margin-bottom: 10px;*/
  /*}*/

  /*.borderCard ul li {*/
  /*  list-style: none;*/
  /*  line-height: 26px;*/
  /*  font-size: 14px;*/
  /*  overflow: hidden;*/
  /*  display: block;*/
  /*}*/

  /*.borderCard ul li .name {*/
  /*  color: #999;*/
  /*  float: left;*/
  /*  width: 130px;*/
  /*  padding-right: 20px;*/
  /*  text-align: right;*/
  /*}*/

  /*.borderCard ul li .text {*/
  /*  color: #000;*/
  /*  float: left;*/
  /*}*/

  /*h3 {*/
  /*  line-height: 50px;*/
  /*}*/

  /*.subordinate {*/
  /*  margin: 10px 20px;*/
  /*}*/

  /*.checkbox {*/
  /*  margin: 5px 10px;*/
  /*  min-width: 200px;*/
  /*}*/

  /*.check {*/
  /*  margin-top: 5px;*/
  /*  margin-left: 30px;*/
  /*  min-width: 160px;*/
  /*}*/

  /*.checkboxs {*/
  /*  border-bottom: 1px solid silver;*/
  /*  padding-bottom: 10px;*/
  /*}*/

  /*.outer {*/
  /*  margin: 20px 0;*/
  /*  padding: 10px;*/
  /*  border: 1px solid silver;*/
  /*  border-radius: 5px;*/
  /*}*/
  .video p{
    font-size: 20px;
    line-height: 52px;

  }
</style>
